import "package:flutter/material.dart";

class RecommendMenuHotItem {
  String title;
  String? subTitle;
  String cover;
  RecommendMenuHotItem({
    required this.title,
    this.subTitle,
    required this.cover,
  });
}

class RecommendMenuNewItem {
  String title;
  String cover;
  String? subTitle;
  RecommendMenuNewItem({
    required this.title,
    this.subTitle,
    required this.cover,
  });
}

// 最近热门推荐
class RecommendPageViewWidget extends StatefulWidget {
  const RecommendPageViewWidget({super.key});
  @override
  State<StatefulWidget> createState() {
    return _RecommendPageViewWidgetState();
  }
}

class _RecommendPageViewWidgetState extends State<RecommendPageViewWidget> {
  double recommendMenuHeight = 0; //推荐订阅菜单动态高度
  int currentPage = 0;
  PageController recommendMenuController = PageController(initialPage: 0);
  List<double> recommendMenuHeightList = [50, 170];

  @override
  void initState() {
    recommendMenuHeight = recommendMenuHeightList[0];
    recommendMenuController.addListener(() {
      double page = recommendMenuController.page ?? 0;
      // 向下取整+1，表示当前在的页切换范围
      int startPage = page.toInt();
      double startHeight = recommendMenuHeightList[startPage]; //开始高度
      double endHeight = 0; //结束高度
      if (startPage == page || startPage == recommendMenuHeightList.length) {
        // 在每页的起点 或 滚动到最后一页
        endHeight = startHeight;
      } else {
        endHeight = recommendMenuHeightList[startPage + 1];
      }
      double rangHeight = endHeight - startHeight;
      double progress = page - startPage; //当前滚动进度
      double addHeight = progress * rangHeight; //应添加的高度
      setState(() {
        recommendMenuHeight = startHeight + addHeight;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    recommendMenuController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(color: Colors.transparent),
      padding: const EdgeInsets.only(left: 6, right: 6),
      child: Column(
        children: [
          SizedBox(
            height: recommendMenuHeight,
            width: double.infinity,
            child: PageView(
              onPageChanged: (value) {
                setState(() {
                  currentPage = value;
                });
              },
              allowImplicitScrolling: true,
              controller: recommendMenuController,
              children: [
                ListView(
                  physics: const NeverScrollableScrollPhysics(),
                  children: [RecommendMenuHotWidget()],
                ),
                ListView(
                  physics: const NeverScrollableScrollPhysics(),
                  children: [RecommendMenuItemWidget()],
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.only(top: 1, bottom: 5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 12,
                  height: 3,
                  margin: const EdgeInsets.only(right: 2),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: currentPage == 0
                          ? [
                              const Color.fromARGB(228, 20, 74, 144),
                              const Color.fromARGB(227, 43, 123, 228),
                            ]
                          : [Colors.white, Colors.white],
                    ),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(3),
                      bottomLeft: Radius.circular(3),
                    ),
                  ),
                ),
                Container(
                  width: 12,
                  height: 3,
                  margin: const EdgeInsets.only(left: 2),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: currentPage == 1
                          ? [
                              const Color.fromARGB(228, 20, 74, 144),
                              const Color.fromARGB(227, 43, 123, 228),
                            ]
                          : [Colors.white, Colors.white],
                    ),
                    borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(3),
                      bottomRight: Radius.circular(3),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

class RecommendMenuHotWidget extends StatelessWidget {
  final List<RecommendMenuHotItem> list = [
    RecommendMenuHotItem(
      title: '碧蓝航线',
      subTitle: '限时减尾款',
      cover: "./images/tab_1.jpg",
    ),
    RecommendMenuHotItem(
      title: '香格里拉',
      cover: "./images/tab_2.jpg",
    ),
    RecommendMenuHotItem(
      title: '葬送的芙',
      subTitle: '限时减尾款',
      cover: "./images/tab_3.jpg",
    )
  ];
  RecommendMenuHotWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: list
            .map(
              (e) => Expanded(
                flex: 1,
                child: AspectRatio(
                  aspectRatio: 2.5 / 1,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 3, left: 3),
                    child: Container(
                      clipBehavior: Clip.none,
                      decoration: BoxDecoration(
                        color: const Color.fromARGB(255, 252, 245, 255),
                        borderRadius: BorderRadius.circular(6),
                      ),
                      child: Stack(
                        clipBehavior: Clip.none,
                        children: [
                          Positioned(
                            bottom: 0,
                            right: 2,
                            child: Image.asset(
                              e.cover,
                              width: 30,
                              height: 44,
                              fit: BoxFit.cover,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  e.title,
                                  style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 12,
                                    height: 1,
                                  ),
                                ),
                                e.subTitle != null
                                    ? Text(
                                        e.subTitle as String,
                                        style: const TextStyle(
                                          fontSize: 10,
                                          color: Colors.black54,
                                          height: 1,
                                        ),
                                      )
                                    : const SizedBox(),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}

class RecommendMenuItemWidget extends StatelessWidget {
  final List<RecommendMenuHotItem> list = [
    RecommendMenuHotItem(
      title: '蔚蓝档案',
      subTitle: '9件新品',
      cover: "./images/tab_1.jpg",
    ),
    RecommendMenuHotItem(
      title: '虚拟主播',
      subTitle: '7件新品',
      cover: "./images/tab_2.jpg",
    ),
    RecommendMenuHotItem(
      title: '明日方舟',
      subTitle: '6件新品',
      cover: "./images/tab_3.jpg",
    ),
    RecommendMenuHotItem(
      title: '咒术回战',
      subTitle: '11件新品',
      cover: "./images/tab_4.jpg",
    ),
    RecommendMenuHotItem(
      title: 'LoveLive',
      cover: "./images/tab_5.jpg",
    ),
    RecommendMenuHotItem(
      title: '少年歌行',
      cover: "./images/tab_1.jpg",
    ),
    RecommendMenuHotItem(
      title: 'VOCA',
      subTitle: '16件新品',
      cover: "./images/tab_2.jpg",
    ),
    RecommendMenuHotItem(
      title: 'Virt',
      cover: "./images/tab_3.jpg",
    ),
    RecommendMenuHotItem(
      title: '植物大战',
      cover: "./images/tab_4.jpg",
    ),
    RecommendMenuHotItem(
      title: '全部订阅',
      cover: "./images/tab_5.jpg",
    ),
  ];
  RecommendMenuItemWidget({super.key});
  @override
  Widget build(BuildContext context) {
    List<List<RecommendMenuHotItem>> columnLists = [];
    List<RecommendMenuHotItem> rowList = [];
    int preColumnMaxCount = 5;
    for (int i = 0; i < list.length; i++) {
      if (rowList.length == preColumnMaxCount) {
        columnLists.add(rowList);
        rowList = [];
      }
      rowList.add(list[i]);
      if (i == list.length - 1) columnLists.add(rowList);
    }

    return Column(
      children: columnLists.map((row) {
        return Padding(
          padding: const EdgeInsets.only(bottom: 4),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: row.map((item) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(4),
                    child: SizedBox(
                      width: 58,
                      height: 58,
                      child: Stack(
                        alignment: Alignment.bottomCenter,
                        children: [
                          AspectRatio(
                            aspectRatio: 1,
                            child: Image.asset(
                              item.cover,
                              fit: BoxFit.cover,
                            ),
                          ),
                          item.subTitle != null
                              ? Container(
                                  height: 16,
                                  alignment: Alignment.bottomCenter,
                                  decoration: const BoxDecoration(
                                    color: Color.fromARGB(124, 0, 0, 0),
                                  ),
                                  child: Text(
                                    item.subTitle as String,
                                    style: const TextStyle(
                                      color: Colors.white,
                                      fontSize: 11,
                                    ),
                                  ),
                                )
                              : const SizedBox()
                        ],
                      ),
                    ),
                  ),
                  Text(
                    item.title,
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 11,
                      height: 2.3,
                    ),
                  ),
                ],
              );
            }).toList(),
          ),
        );
      }).toList(),
    );
  }
}
